<template>
  <!-- 公共部分功能 -->
  <el-menu mode="horizontal">
    <el-menu-item index="0">
      <img src="/src/assets/img/logo.png" />
      <span>智慧光谷</span>
    </el-menu-item>
    <el-menu-item index="1"><ActiveRoad /></el-menu-item>
    <el-menu-item index="2"><ReadAnnouncement /></el-menu-item>
    <el-sub-menu index="3">
      <template #title>工具箱</template>
      <el-menu-item index="3-1"><DrawLine /></el-menu-item>
      <el-menu-item index="3-2"><DrawArea /></el-menu-item>
      <el-menu-item index="3-3"> <ImportPhoto /></el-menu-item>
      <el-menu-item index="3-4"> <ClearDraw /></el-menu-item>
    </el-sub-menu>
    <el-menu-item index="4" v-show="type === 'common'" @click="addEventClick()"
      >上报事件</el-menu-item
    >
    <!-- 处理事件 -->
    <el-menu-item index="5" v-show="type === 'traffic'">
      <handleEvent></handleEvent
    ></el-menu-item>
    <el-menu-item index="9999" v-if="type === 'traffic'" @click="addAnnClick()"
      >发布公告</el-menu-item
    >
    <el-menu-item index="6" @click="openAdmin=true" v-if="route.query.type==='admin'">用户管理</el-menu-item>
    <el-menu-item index="7"  v-if="type === 'traffic'"><BoxSearch/></el-menu-item>
    <el-menu-item index="8"  v-if="type === 'traffic'"><AttrSearch/></el-menu-item>

    <el-sub-menu index="9998" class="user-info1">
      <template #title>{{ currentUser.username }}</template>
      <UserInfo></UserInfo>
    </el-sub-menu>

        <!-- 将用户管理页面作为弹出框显示 -->
        <Teleport to="body">
      <div class="modal" v-if="openAdmin">
        <admin-view />
        <div class="mask" @click="openAdmin=false"></div>
      </div>
    </Teleport>
  </el-menu>

  <!-- 弹窗部分 -->
  <!-- 一开始不显示，点击上报事件之后才显示 -->
  <add-event ref="addEvent"></add-event>
  <add-announce ref="addAnnounce"></add-announce>
</template>

<script setup>
/* 引入各功能组件 */
import ImportPhoto from "./Nav/ImportPhoto.vue";
import ActiveRoad from "./Nav/ActiveRoad.vue";
import AdminView from "../Admin/AdminView.vue";
import DrawLine from "./Nav/DrawLine.vue";
import DrawArea from "./Nav/DrawArea.vue";
import ClearDraw from "./Nav/ClearDraw.vue";
import BoxSearch from "./Nav/BoxSearch.vue";
import AttrSearch from "./Nav/AttrSearch.vue";
import ReadAnnouncement from "./Nav/ReadAnnouncement.vue";
import UserInfo from "./Nav/UserInfo.vue";
import AddEvent from "./Nav/AddEvent.vue";
import handleEvent from "./Nav/handleEvent.vue";
import AddAnnounce from "./Nav/AddAnnounce.vue";
import { getTokenStatus } from "@/api/user";
import { ref,onMounted,onUnmounted} from "vue";
/* 引入路由，判断当前用户类型 */
import {useRoute,useRouter} from "vue-router";
const route=useRoute()
const router=useRouter()
let openAdmin = ref(false);
import { useUserStore } from "@/stores/userStore";
const { currentUser } = useUserStore();
const type = currentUser.type;

// 弹窗部分
const addEvent = ref(null);
const addAnnounce = ref(null);
// 上报事件
const addEventClick = () => {
  if (addEvent.value.addPointClick) {
    addEvent.value.addPointClick();
  }
};
// 发布公告
const addAnnClick = () => {
  if (addAnnounce.value.addAnnounceClick) {
    addAnnounce.value.addAnnounceClick();
  }
};

let timer = null;
onMounted(()=>{
  
timer=setInterval(()=>{
  getTokenStatus().then(res=>{
    //console.log(res)
    if(!res){
      router.push({ name: "login" });
    }
  })

},3000)
})

onUnmounted(()=>{
  clearInterval(timer)
})
</script>

<style scoped lang="scss">
.el-menu--horizontal {
  width: 100vw;
  position: relative;
  img {
    width: 50px;
    height: 50px;
  }
}
.user-info1 {
  position: absolute;
  right: 0;
}
.mask{
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;

}
</style>
